<template>
  <el-dialog
    v-if="modelValue.visible"
    v-model="modelValue.visible"
    :title="
      !modelValue.form.id
        ? `新增${modelValue.title}`
        : `修改${modelValue.title}`
    "
    width="550px"
  >
    <el-form
      ref="addEditRef"
      :model="modelValue.form"
      :rules="modelValue.rules"
      :label-width="90"
      style="margin-top: 10px"
    >
      <el-form-item label="规则编码" prop="number">
        <el-input
          v-model="modelValue.form.number"
          placeholder="请输入规则编码"
          show-word-limit
          maxlength="64"
          clearable
        />
      </el-form-item>

      <el-form-item label="规则名称" prop="name">
        <el-input
          v-model="modelValue.form.name"
          placeholder="请输入物料使用规则名称"
          show-word-limit
          maxlength="64"
          clearable
        />
        <div class="example">例如：物料每使用2000g提醒机台</div>
      </el-form-item>

      <el-form-item label="规则设置" prop="useValue">
        <div class="rule-setting">
          <span>每当机台使用</span>
          <el-input-number
            v-model="modelValue.form.useValue"
            :min="1"
            :max="99999"
          />
          <span style="margin-left: 12px">g 提醒机台</span>
        </div>
      </el-form-item>

      <el-form-item label="备注">
        <el-input
          v-model="modelValue.form.remark"
          type="textarea"
          placeholder="请输入内容"
          resize="none"
          :rows="3"
          show-word-limit
          maxlength="255"
          clearable
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="ensure"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import {
  addFdsMaterialUsageRuleset,
  updateFdsMaterialUsageRuleset,
} from '@/api/fds-material-usage-ruleset.api'

const props = defineProps(['modelValue'])
const addEditRef = ref(null)

const dialogVisible = ref(false)
const formRef = ref(null)

const cancel = () => {
  props.modelValue.visible = false
}

/***
 * 确认弹框
 */
const ensure = () => {
  let form = props.modelValue.form
  let formData = {
    number: form.number,
    name: form.name,
    useValue: form.useValue,
    enabled: '1',
    remark: form.remark,
  }

  if (!addEditRef.value) return
  addEditRef.value.validate((valid, fields) => {
    if (valid) {
      if (form.id) {
        updateFdsMaterialUsageRuleset({
          ...formData,
          id: form.id,
        })
          .then((res) => {
            cancel()
            ElMessage({
              message: props.modelValue.title + '修改成功',
              type: 'success',
            })
            if (props.modelValue.refreshDataList) {
              props.modelValue.refreshDataList()
            }
          })
          .catch((err) => {
            ElMessage({
              message: err.msg || err,
              type: 'error',
            })
          })
        return
      }

      addFdsMaterialUsageRuleset(formData)
        .then((res) => {
          cancel()
          ElMessage({
            message: props.modelValue.title + '新增成功',
            type: 'success',
          })
          if (props.modelValue.refreshDataList) {
            props.modelValue.refreshDataList()
          }
        })
        .catch((err) => {
          ElMessage({
            message: err.msg || err,
            type: 'error',
          })
        })
    }
  })
}

// 表单数据
const form = reactive({
  ruleCode: 'MR0002',
  ruleName: '',
  ruleSetting: 1000,
  remark: '',
})
</script>

<style scoped>
.word-count {
  font-size: 12px;
  color: #999;
  text-align: right;
  margin-top: 4px;
}

.example {
  font-size: 12px;
  color: #ef9f24;
  margin-top: 4px;
}

.rule-setting {
  display: flex;
  align-items: center;
}

.rule-setting span {
  margin-right: 8px;
  font-size: 14px;
}
</style>
